@charset 'utf-8';

@import url("../styles/reset.less");
html,
body {
  height: 100%;
}
body {
  display: flex;
}
.left {
  width: 375px;
  height: 100%;
  background-image: url(../img/banner.4994397e.jpg);
  background-size: cover;
  background-position: 50%;
}
.right {
  flex: 1;
  overflow-y: auto;

  header {
    padding: 20px;
    display: flex;
    justify-content: space-between;

    .logo {
      display: block;
      font-size: 26px;
      font-weight: 600;
      color: #333;

      > img {
        width: 40px;
        height: 40px;
      }
    }

    nav {
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      color: #838383;

      a {
        display: inline-block;
        color: #838383;
        margin: 0 10px;
      }
      a:hover {
        color: #ff6900;
      }

      > span {
        display: inline-block;
        width: 1px;
        height: 14px;
        margin: 0 10px;
      }

      .item {
        display: inline-block;
        position: relative;
        cursor: pointer;

        > a > i {
          display: inline-block;
          width: 0;
          height: 0;
          border: 5px solid;
          border-color: #b1b1b1 transparent transparent transparent;
          vertical-align: text-bottom;
          margin-left: 3px;
          transition: all 0.3s;
          transform-origin: 50% 25%;
        }

        > ul {
          display: none;
          text-align: center;
          background: #fff;
          box-shadow: 0 5px 29px 0 hsl(0deg 0% 64% / 20%);
          position: absolute;
          left: 4px;
          top: 45px;

          > li {
            padding: 0 14px;
          }
          > li:hover {
            background: #fff3e6;
          }
        }
      }
      .item:hover a {
        color: #ff6900;
      }
      .item:hover a > i {
        transform: rotate(180deg);
        border-color: #ff6900 transparent transparent transparent;
      }
      // .item:hover ul {
      //     display: block;
      // }
    }
  }

  main {
    padding-top: 20px;

    .card {
      box-sizing: border-box;
      width: 450px;
      border-radius: 4px;
      padding: 40px 45px;
      margin: 0 auto 80px;
      box-shadow: 0 20px 50px 0 hsl(0deg 0% 64% / 10%);
      position: relative;

      .box {
        // 切换登录方式
        .switch {
          box-sizing: border-box;
          width: 64px;
          height: 64px;
          opacity: 0.4;
          border: 32px solid;
          border-color: #ff5c00 #ff5c00 transparent transparent;
          border-radius: 0 4px 0;
          position: absolute;
          top: 0;
          right: 0;
          cursor: pointer;
          transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

          .ico {
            font-size: 36px;
            color: #fff;
            position: absolute;
            right: -22px;
            top: -30px;
          }
          .text {
            opacity: 0;
            color: #fff;
            background: #ff5c00;
            border-radius: 4px;
            padding: 5px 15px;
            position: absolute;
            left: -122px;
            top: -20px;
            transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

            .triangle {
              border: 7px solid;
              border-color: transparent transparent transparent #ff5c00;
              position: absolute;
              right: -14px;
              top: 9px;
            }
          }
        }
        .switch:hover {
          opacity: 1;
        }
        .switch:hover .text {
          opacity: 1;
        }

        // 输入登录
        .input {
          .title {
            a {
              font-size: 22px;
              color: #bbb;
              padding-bottom: 5px;
              margin-right: 20px;
              transition: color 0.3s;
            }
            a.active {
              color: #333;
              border-bottom: 4px #ff5c00 solid;
              border-radius: 2px;
            }
          }

          .content {
            padding: 20px 4px 0;

            .case {
              border: 1px solid transparent;
              // background: #F9F9F9;
              border-radius: 4px;
              position: relative;
              transition: all 0.3s;

              > p {
                font-size: 17px;
                color: rgba(0, 0, 0, 0.4);
                position: absolute;
                left: 20px;
                top: 20px;
                transition: all 0.2s;
              }
              > p.move {
                font-size: 12px;
                transform: translate(0, -10px);
              }

              input {
                box-sizing: border-box;
                width: 100%;
                height: 60px;
                line-height: 20px;
                font-size: 17px;
                padding: 30px 20px 10px;
                background: #f9f9f9;
                border-radius: 4px;
              }

              .ico {
                width: 60px;
                height: 60px;
                font-size: 20px;
                text-align: center;
                line-height: 60px;
                position: absolute;
                top: 0;
                right: 0;
                cursor: pointer;

                .icon {
                  font-size: 23px;
                  color: #bbb;
                  transition: color 0.3s;
                }
              }
            }
            .active {
              box-shadow: 0px 0px 3px 0 #ff6900;
              border-color: #ff5c00;
            }

            .hint {
              display: none;
              font-size: 12px;
              color: #f04645;
              margin-top: 10px;
              padding-left: 5px;
            }

            .password {
              margin-top: 20px;
            }
          }
          // 登录
          .login {
            display: block;
          }
          // 注册
          .reg {
            display: none;

            .region {
              box-sizing: border-box;
              height: 60px;
              background: #f9f9f9;
              margin-bottom: 20px;
              padding: 10px 20px;
              cursor: pointer;

              h6 {
                font-size: 12px;
                color: #aaa;
              }
              h5 {
                font-size: 17px;
                color: #333;
              }
              svg {
                font-size: 18px;
                color: #aaa;
                position: absolute;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
              }
            }

            .phone {
              .ct {
                width: 40%;

                div {
                  box-sizing: border-box;
                  width: 140px;
                  height: 60px;
                  padding: 10px 20px;
                  position: absolute;
                  left: 0;
                  top: 0;
                  cursor: pointer;

                  h6 {
                    font-size: 12px;
                    color: #aaa;
                  }
                  p {
                    font-size: 17px;
                    color: #333;
                  }
                  svg {
                    font-size: 18px;
                    color: #aaa;
                    position: absolute;
                    right: 20px;
                    top: 0;
                    bottom: 0;
                    margin: auto;
                  }
                }
              }
              p {
                left: 160px;
              }
              input {
                padding-left: 40%;
              }
            }

            .vc {
              margin-top: 20px;
              .ico {
                width: 102px;
                height: 60px;
                font-size: 14px;
                color: #ff5c00;
              }
            }
          }

          // 共有样式
          .common {
            padding-left: 5px;

            .check {
              line-height: 20px;
              margin-top: 20px;
              position: relative;

              > em {
                display: inline-block;
                box-sizing: border-box;
                width: 20px;
                height: 20px;
                background: #f9f9f9;
                // border: 1px solid #DDDDDD;
                border-radius: 5px;
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                // transition: all .3s;

                input {
                  width: 100%;
                  height: 100%;
                  cursor: pointer;
                  opacity: 0;
                }

                b {
                  box-sizing: border-box;
                  display: inline-block;
                  width: 20px;
                  height: 20px;
                  border-radius: 5px;
                  position: absolute;
                  left: 0;
                  top: 0;
                  transition: border-color 0.3s;
                  border: 1px solid #ddd;
                  cursor: pointer;
                }
                b.scale {
                  transition: all 0.3s;
                  transform: scale(1.5);
                  border-color: transparent;
                }
              }
              em.bg {
                background: url(../img/xz.png) no-repeat center/20px;
              }

              span {
                color: rgba(0, 0, 0, 0.4);
                padding-left: 25px;
                cursor: pointer;

                a {
                  color: #333;
                  padding: 0 5px;
                }
              }

              .hint {
                display: none;
                width: 148px;
                text-align: center;
                line-height: 18px;
                color: #343434;
                background: #fff;
                box-shadow: 0px 0px 17px 2px hsl(0deg 0% 64% / 10%);
                padding: 15px 20px;
                position: absolute;
                left: 0;
                right: 0;
                top: -20px;
                margin: auto;
                z-index: 2;

                .icon {
                  font-size: 18px;
                  margin-right: 5px;
                  vertical-align: middle;
                }
              }
            }
            .check:hover b {
              border-color: #ff5c00;
            }

            .submit {
              width: 100%;
              height: 60px;
              font-size: 18px;
              text-align: center;
              color: #fff;
              background: #ffbe99;
              border: 0px;
              border-radius: 5px;
              margin: 20px 0 10px;
              transition: all 0.3s;
            }
            .submit:hover {
              opacity: 0.8;
            }

            .way {
              margin-bottom: 20px;

              a {
                font-size: 17px;
                color: #ff5c00;
              }

              .login a:last-of-type {
                float: right;
              }
            }
            .more {
              font-size: 17px;
              text-align: center;
              color: #aaa;

              p {
                margin-bottom: 10px;
              }

              div .icon {
                font-size: 46px !important;
                margin: 0 12px;
                cursor: pointer;
              }
            }
          }
        }
      }

      // 扫码登录
      .code {
        text-align: center;
        display: none;

        // 切换登录方式
        .switch {
          box-sizing: border-box;
          width: 64px;
          height: 64px;
          opacity: 0.4;
          border: 32px solid;
          border-color: #ff5c00 #ff5c00 transparent transparent;
          border-radius: 0 4px 0;
          position: absolute;
          top: 0;
          right: 0;
          cursor: pointer;
          transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

          .ico {
            font-size: 40px;
            color: #fff;
            position: absolute;
            right: -25px;
            top: -34px;
          }
          .text {
            opacity: 0;
            color: #fff;
            background: #ff5c00;
            border-radius: 4px;
            padding: 5px 15px;
            position: absolute;
            left: -122px;
            top: -20px;
            transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

            .triangle {
              border: 7px solid;
              border-color: transparent transparent transparent #ff5c00;
              position: absolute;
              right: -14px;
              top: 9px;
            }
          }
        }
        .switch:hover {
          opacity: 1;
        }
        .switch:hover .text {
          opacity: 1;
        }

        h2 {
          font-size: 22px;
          color: #333;
          margin-bottom: 30px;
        }
        .co {
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;

          img:first-of-type {
            width: 180px;
            height: 180px;
          }
          img:last-of-type {
            width: 40px;
            height: 40px;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
          }
        }
        > p {
          font-size: 14px;
          color: #333;
          margin: 30px 0 50px;
        }
        .app {
          margin-bottom: 20px;

          > p {
            font-size: 17px;
            color: #aaa;
            margin-bottom: 10px;
          }

          > div {
            display: flex;
            justify-content: center;

            div {
              display: flex;
              justify-content: center;
              align-items: center;
              width: 48px;
              height: 48px;
              margin-right: 30px;
              position: relative;

              svg {
                font-size: 26px;
                color: #fff;
              }
              p {
                font-size: 12px;
                color: #aaa;
                position: absolute;
                bottom: -20px;
                left: 0;
                right: 0;
                margin: auto;
              }
            }
            .mijia {
              background: #48b885;
            }
            .mi {
              svg {
                font-size: 46px;
              }
            }
            .xiaoai {
              background: #ff232d;
              border-radius: 4px;
            }
          }
        }
      }
    }
  }

  .copy {
    font-size: 12px;
    text-align: center;
    color: #999;
    margin-bottom: 20px;

    a {
      color: #999;
    }
  }
}
